<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function createCalendar(year, month) {
        let table = "<table>";
        let date = new Date(year, month - 1);
        console.log(date);
        let day = date.getDay();
        console.log(day);
        let daysInMonth = 32 - new Date(year, month, 32).getDate();
        console.log(daysInMonth);

        table += "<tr>";

        for (let i = 0; i < 7; i++) {
          table +=
            "<th>" +
            ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][i] +
            "</th>";
        }

        table += "</tr>";
        table += "<tr>";

        for (let i = 0; i < day; i++) {
          table += "<td></td>";
        }

        for (let i = 1; i <= daysInMonth; i++) {
          if (day % 7 === 0) {
            table += "</tr><tr>";
          }
          table += `<td>${i}</td>`;
          day++;
        }

        table += "</tr></table>";

        return table;
      }

      document.body.insertAdjacentHTML("afterbegin", createCalendar(2025, 4));
    </script>
  </body>
</html>
